<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>提现</view>
				</view>
				<view class="flex a-center place rule">
					<u-icon name="file-text" size="40" class="msg"></u-icon>
					<view>提现记录</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="flex a-center ">
				<view class="b-title">提现</view>
				<u-icon name="error-circle" size="26" color="#999999"></u-icon>
			</view>
			<view class="sxf">提现手续费5%</view>
			<view class="input flex a-center">
				<view>￥</view>
				<u-input placeholder="请输入提现金额" type="number"></u-input>
			</view>
			<view class="split">
				<u-line length="654" color="#f2f2f2"></u-line>
			</view>
			<view class="flex j-between a-center w-tip">
				<view class="flex a-center">
					<view>可提现金额</view>
					<view class="money">500.00</view>
					<view>元</view>
				</view>
				<view class="all">全部提现</view>
			</view>
		</view>
		<view class="title-line">支付方式</view>
		<view class="block">
			<view class="flex j-between a-center" @tap="ctype(1)">
				<view class="flex a-center">
					<u-icon name="weixin-fill" size="48" color="#07C160"></u-icon>
					<view class="t-name">微信支付</view>
				</view>
				<view class="chk-item flex j-center a-center" :class="{active:type === 1}">
					<u-icon name="checkbox-mark" color="#FFF" size="20"></u-icon>
				</view>
			</view>
			<view class="split">
				<u-line length="#F2F2F2" color="#F2F2F2"></u-line>
			</view>
			<view class="flex j-between a-center" @tap="ctype(2)">
				<view class="flex a-center">
					<u-icon name="zhifubao-circle-fill" size="48" color="#02A9F1"></u-icon>
					<view class="t-name">支付宝支付</view>
					<view class="bind">未绑定</view>
				</view>
				<view class="chk-item flex j-center a-center" :class="{active:type === 2}">
					<u-icon name="checkbox-mark" color="#FFF" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="submit flex j-center a-center">
			<view>提现方式</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			value:-1,
			list:[{c:5,v:500},{c:10,v:1000},{c:20,v:2000},{c:50,v:5000},{c:100,v:10000},{c:500,v:50000}],
			type:1,
		}
	},
	methods: {
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+10)+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
		change(i){
			this.value = i
		},
		ctype(i){
			this.type = i
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #333;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 33%;}
	.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
}
.title-line{font-size: 32rpx;color: #333;margin: 32rpx 0;font-weight: bold;}
.block{background-color: #FFF;border-radius: 16rpx;padding: 32rpx 24rpx;color: #333;
	.b-title{font-size: 32rpx;font-weight: bold;margin-right: 26rpx;}
	.sxf{font-size: 24rpx;color: #999;margin-top: 16rpx;}
	.input{font-size: 48rpx;font-weight: bold;color: #333;margin-top: 72rpx;
		/deep/input{font-size: 48rpx;margin-left: 24rpx;}
	}
	.w-tip{font-size: 24rpx;color: #999;
		.money{color: #333;}
		.all{color: #246FDD;}
	}
	.chk-item{width: 32rpx;height: 32rpx;border:2rpx solid #999;border-radius: 100%;}
	.bind{margin-left: 36rpx;color: #246FDD;font-size: 28rpx;}
	.active{background-color: #246FDD;border:none;}
	.split{margin: 32rpx 0;}
	.t-name{font-size: 32rpx;margin-left: 24rpx;}
}
.submit{height: 88rpx;border-radius: 16rpx;color: #FFF;font-size: 32rpx;background-color: #246FDD;margin-top: 48rpx;}
</style>
